<!DOCTYPE html>
<html>
<head>
	<title></title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/shopcart.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">

	<script type="text/javascript" src="js/jquery-3.3.1/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="js/jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
	<div class="shortcut">
		<div class="w">
			<div class="fl">
				<ul>
					<li>优购商城欢迎你！&nbsp</li>
					<li>
						<a href="#">请登录</a>
						<a href="#" class="style-red">免费注册</a>
					</li>
					
				</ul>
			</div>
			<div class="fr">
				<ul>
					<li>
						<a href="#">我的订单</a>						
					</li>
					<li class="spacer"></li>
					<li>
						<a href="#">我的优购</a>
						<i class="iconfont icon-jiantou9"></i>
					</li>
					<li class="spacer"></li>
					<li><a href="#">优购商城会员</a></li>
					<li class="spacer"></li>
					<li><a href="#">企业采购</a></li>
					<li class="spacer"></li>
					<li>
						<a href="#">关注优购商城</a>
						<i class="iconfont icon-jiantou9">
						</i>
					</li>
					<li class="spacer"></li>
					<li>
						<a href="#">客户服务</a>
						<i class="iconfont icon-jiantou9"></i>
					</li>
					<li class="spacer"></li>
					<li>
						<a href="#">网站导航</a>
						<i class="iconfont icon-jiantou9"></i>
					</li>
					
				</ul>
			</div>
		</div>
	</div>
	<div class="header w">
		<div class="logo">
			<h1><a href="index.html" title="品优购">品优购</a></h1>

			
			
		</div>
		
		
	</div>
	<div class="title">
		<div class="w">
			<div class="dropdown">
				<div class="title_cart">全部商品</div>
				
			</div>
			
		</div>
	</div>

	<div class="content w">
		<div class="information">
			<div class="c_checkbox"><input type="checkbox" name="" class="checkall">全选</div>
			<div class="c_goods">商品</div>
			<div class="c_price">单价</div>
			<div class="c_num">数量</div>
			<div class="c_sum">小计</div>
			<div class="c_action">操作</div>

		</div>
		<div class="goods_item">
			<div class="goods_detail">
				<div class="goods_check"><input type="checkbox" name="" class="somecheck"></div>
				<div class="goods_img"><img src="img/TB1B_UBf3vD8KJjy0FlXXagBFXa-800-800.jpg_120x120q90.jpg_.webp.jpg"></div>
				<div class="goods_name">华为 HUAWEI Mate 20 Pro 手机 超大广角徕卡三摄 全网通双4G 亮黑色 8GB+128GB (3D面部识别+屏内指纹)</div>
				<div class="goods_price">¥3000</div>
				<div class="goods_num">
					<button class="btn_left">-</button>
					<input type="text" name="" value="1" class="amount">
					<button class="btn_right">+</button>
				</div>
				<div class="goods_sum">¥3000</div>
				<div class="goods_delete"><a href="#">删除</a></div>
			</div>
			<div class="goods_detail">
				<div class="goods_check"><input type="checkbox" name="" class="somecheck"></div>
				<div class="goods_img"><img src="img/TB1B_UBf3vD8KJjy0FlXXagBFXa-800-800.jpg_120x120q90.jpg_.webp.jpg"></div>
				<div class="goods_name">华为 HUAWEI Mate 20 Pro 手机 超大广角徕卡三摄 全网通双4G 亮黑色 8GB+128GB (3D面部识别+屏内指纹)</div>
				<div class="goods_price">¥3000</div>
				<div class="goods_num">
					<button class="btn_left">-</button>
					<input type="text" name="" value="1">
					<button class="btn_right">+</button>
				</div>
				<div class="goods_sum">¥3000</div>
				<div class="goods_delete"><a href="#">删除</a></div>
			</div>
			<div class="goods_detail">
				<div class="goods_check"><input type="checkbox" name="" class="somecheck"></div>
				<div class="goods_img"><img src="img/TB1B_UBf3vD8KJjy0FlXXagBFXa-800-800.jpg_120x120q90.jpg_.webp.jpg"></div>
				<div class="goods_name">华为 HUAWEI Mate 20 Pro 手机 超大广角徕卡三摄 全网通双4G 亮黑色 8GB+128GB (3D面部识别+屏内指纹)</div>
				<div class="goods_price">¥3000</div>
				<div class="goods_num">
					<button class="btn_left">-</button>
					<input type="text" name="" value="1">
					<button class="btn_right">+</button>
				</div>
				<div class="goods_sum">¥3000</div>
				<div class="goods_delete"><a href="#">删除</a></div>
			</div>
		</div>

		<div class="goods_total">
			<div class="total fl">
			<div class="c_checkbox"><input type="checkbox" name="" class="checkall">全选</div>
			<div class="checked_delete"><a href="#">删除选中的商品</a></div>
			<div class="clearCart">清空购物车</div>
		    </div>
		    <div class="total fr">
		    	<div class="total_num">已经选择<em>1</em>件商品</div>
		    	<div class="total_sum">总价<em>¥3000</em></div>
		    	<input type="submit" name="" value="结算" class="btn">
		    </div>
		</div>


	</div>

	 <div class="footer">
		<div class="w">
			<div class="mod_service">
				<ul>
					<li>
						<div class="iconLeft"><i class="iconfont icon-daohangshouye"></i></div>
						<div class="text">轻松购物</div>
					</li>
					<li>
						<div class="iconLeft"><i class="iconfont icon-daohangshouye"></i></div>
						<div class="text">轻松购物</div>
					</li>
					<li>
						<div class="iconLeft"><i class="iconfont icon-daohangshouye"></i></div>
						<div class="text">轻松购物</div>
					</li>
					<li>
						<div class="iconLeft"><i class="iconfont icon-daohangshouye"></i></div>
						<div class="text">轻松购物</div>
					</li>
					<li>
						<div class="iconLeft"><i class="iconfont icon-daohangshouye"></i></div>
						<div class="text">轻松购物</div>
					</li>
				</ul>
			</div>
			<div class="mod_help">
				
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
				
			</div>
	
			<div class="mod_copyright">
				<p class="mod_copyright_link">
					
					<a href="#">关于我们</a>											
					<a href="#">联系我们</a>						
	                    <a href="#">联系客服</a>
					<a href="#">商家入驻</a>				
					<a href="#">友情链接</a>
					<a href="#">公益社区</a>				
					<a href="#">销售联盟</a>
						
					
				
				</p>
				<p class="mod_copyright_info">
					增值电信业务经营许可证： 浙B2-20110446 市场名称登记证：工商网市字3301004119号
					 <br>出版物网络交易平台服务经营备案证： 新出发浙备字第001号
	                    互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com 
				</p>
			</div>
		</div>
	
	</div> 

</body>
<script type="text/javascript">
	$(".checkall").change(function(){
		var statu=$(this).prop("checked");
		console.log(statu);
		$(".somecheck,.checkall").prop("checked",statu);
		if($(this).prop("checked")){
			$(".goods_detail").addClass("changeColor");
		}
		else{

			$(".goods_detail").removeClass("changeColor");
		}
		getSum();
		
	})

	$(".somecheck").change(function(){

		if($(this).prop("checked")){

			$(this).parents(".goods_detail").addClass("changeColor");
		}
		else{
			$(this).parents(".goods_detail").removeClass("changeColor");
		}

	 if($(".somecheck:checked").length==$(".somecheck").length){
	 	$(".checkall").prop("checked",true);

	 	getSum();
		}
	 	

	 
	 else{
	 	$(".checkall").prop("checked",false);
	 	getSum();
	 }
	})

	$(".btn_right").click(function(){

		$(this).siblings(".btn_left").prop("disabled",false);
		var amount=parseInt($(this).prev().val());
		var price=$(this).parent().siblings(".goods_price").html();
		
		var p=parseInt(price.substr(1));
		console.log(p);
		amount++;
		var total=(p*amount).toFixed(2);
		$(this).prev().val(amount);
		$(this).parent().siblings(".goods_sum").html("¥"+total);
		getSum();

	})

	$(".btn_left").click(function(){
		var amount=$(this).next().val();
		console.log(amount);
		if(amount>=1){

		
		amount--;
		$(this).next().val(amount);
	   }
	   else{

	   	$(this).prop("disabled",true);
	   }
	   getSum();
	});

	$(".amount").change(function(){
		var n=$(this).val();
		var price=$(this).parent().siblings(".goods_price").html();
		var p=parseInt(price.substr(1));
		var total=(p*n).toFixed(2);
		$(this).parent().siblings(".goods_sum").html("¥"+total);
		getSum();

	});
	getSum();

	function getSum(){
		var count=0;
		var money=0;
		/*1.先筛选出复选框被选中的商品
		2.获取该商品的数量
		3.选中商品的数量进行加减*/
		$(".somecheck").each(function(i,ele){
			if($(ele).prop("checked"))
			{
				var amount=$(ele).parents(".goods_detail").find("input").eq(1).val();

				var total=$(ele).parent().siblings(".goods_sum").text().substr(1);

				console.log(total);
				money+=parseFloat(total);
				count+=parseInt(amount);
			}
		});

			

		

		/*$(".goods_sum").each(function(i,ele){
			var total=$(ele).text().substr(1);
			console.log(total);

             money+=parseFloat(total);
		})*/

		$(".total_num em").text(count);
		$(".total_sum em").text("¥"+money.toFixed(2));
	}

	$(".goods_delete a").click(function(){

		$(this).parents(".goods_detail").remove();

	});

	$(".checked_delete a").click(function(){
		$(".somecheck").each(function(i,ele){
			/*if($(ele).prop("checked")==true)
			{
				$(ele).parents(".goods_detail").remove();
				$(".checkall").prop("checked",false);
			}*/
			$(".somecheck:checked").parents(".goods_detail").remove();
			getSum();



		})
	})

	$(".clearCart").click(function(){
		$(".goods_item").empty();
		getSum();

	})

</script>
</html>